<template>
  <div class="layout">
    <!-- 左侧导航栏 -->
    <aside :class="['sidebar', { collapsed: isCollapsed }]">
      <div class="logo-container">
        <img src="/pgy1.png" alt="Logo" class="logo" />
        <!-- 文字用 v-if 控制 -->
        <span v-if="!isCollapsed" class="platform-name">{{ platformName }}</span>
      </div>

      <SidebarLayout :is-collapsed="isCollapsed" @changeMenu="changeMenu" />
    </aside>

    <div class="main">
      <el-header class="header">
        <div class="header-left">
          <el-button class="collapse-button" @click="toggleCollapse" size="small" type="text">
            <i v-if="isCollapsed" class="iconfont icon-a-ziyuan815"></i>
            <i v-else class="iconfont icon-a-ziyuan816"></i>
          </el-button>
          <span class="current-page">{{ currentPage }}</span>
        </div>

        <div class="header-right">
          <el-dropdown trigger="click">
            <span class="avatar">
              <img src="/tx1.jpg" alt="User Avatar" />
              <span class="username">用户名</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 暂时不用 -->
                <!-- <el-dropdown-item>个人资料</el-dropdown-item> -->
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <main class="content">
        <router-view />
      </main>

      <el-backtop target=".content" :right="40" :bottom="40">
        <div class="backtop-inner">⬆</div>
      </el-backtop>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SidebarLayout from './SidebarLayout.vue'

export default defineComponent({
  name: 'MainLayout',
  components: { SidebarLayout },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const platformName = '蒲公英管理系统'
    const currentPage = ref((route.meta.title as string) || '')
    const isCollapsed = ref(false)

    const changeMenu = (menu: string) => {
      currentPage.value = menu
    }

    const logout = () => {
      localStorage.removeItem('token')
      router.push('/login')
    }

    const toggleCollapse = () => {
      isCollapsed.value = !isCollapsed.value
    }

    watch(
      () => route.fullPath,
      () => {
        currentPage.value = (route.meta.title as string) || ''
      },
      { immediate: true }
    )

    return { platformName, currentPage, isCollapsed, changeMenu, logout, toggleCollapse }
  }
})
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
  overflow: hidden; /* 防止外层出现滚动条 */
}

/* 左侧侧栏固定 */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  background: #fff;
  border-right: 1px solid #eaeaea;
  transition: width 0.3s ease-in-out;
  overflow: hidden; /* 禁止侧边栏本身滚动 */
}
.sidebar.collapsed {
  width: 64px !important;
}

/* Logo 区域 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.platform-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* 主区域 */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 200px; /* 让出侧边栏空间 */
  transition: margin-left 0.3s ease-in-out;
}
.sidebar.collapsed ~ .main {
  margin-left: 64px; /* 收缩时调整 */
}

/* 顶部固定栏 */
.header {
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  height: 60px;
  padding: 0 20px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: left 0.3s ease-in-out;
}
.sidebar.collapsed ~ .main .header {
  left: 64px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-right {
  display: flex;
  align-items: center;
}
.current-page {
  font-size: 14px;
  font-weight: 500;
  color: #666a6e;
}

/* 用户头像样式 */
.avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.username {
  color: #409eff;
  font-size: 14px;
}

/* 内容区（只允许内容滚动） */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: #f5f6f8;
  margin-top: 60px; /* 给 header 腾出空间 */
  height: calc(100vh - 60px);
}

/* 返回顶部按钮 */
.backtop-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #4d5052;
  color: #fff;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  box-shadow: 0 6px 14px rgba(0, 132, 244, 0.18);
}
</style>
